<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🌈 主日学圣经问答 🌟</title>
    <link rel="icon" type="image/svg+xml" href="assets/images/holy-bible.svg">
    <link rel="stylesheet" href="css/kids-style.css">
    <link rel="stylesheet" href="css/share-card.css">
    <link rel="stylesheet" href="css/animations.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap" rel="stylesheet">
    <style>
        /* PC端选项布局优化 */
        .options-grid {
            display: grid;
            gap: 15px;
            margin: 20px 0;
            grid-template-columns: 1fr;
        }
        
        /* PC端：2x2网格布局 */
        @media (min-width: 768px) {
            .options-grid {
                grid-template-columns: 1fr 1fr;
                gap: 20px;
                max-width: 800px;
                margin: 20px auto;
            }
        }
        
        .option-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 20px;
            border-radius: 15px;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .option-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
        }
        
        .option-btn.correct {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            animation: correctPulse 0.6s ease;
        }
        
        .option-btn.wrong {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            animation: wrongShake 0.6s ease;
        }
        
        /* 难度按钮布局 */
        .difficulty-buttons {
            display: grid;
            gap: 20px;
            grid-template-columns: 1fr;
        }
        
        @media (min-width: 768px) {
            .difficulty-buttons {
                grid-template-columns: 1fr 1fr;
                max-width: 800px;
                margin: 0 auto;
            }
        }
        

    </style>
</head>
<body>
    <!-- 背景装饰 -->
    <div class="background-decorations">
        <div class="cloud cloud1">☁️</div>
        <div class="cloud cloud2">☁️</div>
        <div class="cloud cloud3">☁️</div>
        <div class="star star1">⭐</div>
        <div class="star star2">✨</div>
        <div class="star star3">🌟</div>
        <div class="rainbow"></div>
    </div>

    <!-- 音频控制 -->
    <div class="audio-controls">
        <button id="audioToggle" class="audio-btn" title="音效开关">🔊</button>
        <button id="musicToggle" class="audio-btn" title="背景音乐开关">🎵</button>
        <input type="range" id="volumeSlider" min="0" max="100" value="50" class="volume-slider" title="音量调节">
        <button id="githubBtn" class="audio-btn" onclick="window.open('https://gitee.com/yuhal/game','_blank')" title="查看源码">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
                <path d="M9 18c-4.51 2-5-2-7-2"></path>
            </svg>
        </button>
    </div>

    <!-- 欢迎页面 -->
    <div id="welcomePage" class="page active">
        <div class="welcome-container">
            <div class="game-title">
                <div class="logo-container">
                    <img src="assets/images/holy-bible.svg" alt="圣经" class="game-logo">
                </div>
                <h1 class="title-text">🌈 主日学圣经问答 🌟</h1>
                <p class="subtitle">和小朋友们一起学习圣经故事吧！</p>
            </div>
            
            <div class="character-mascot">
                <div class="mascot">🐑</div>
                <div class="speech-bubble">
                    <p>嗨！我是小羊咩咩，让我们一起探索圣经的奇妙世界吧！</p>
                </div>
            </div>

            <div class="difficulty-selection">
                <h2>选择你的冒险等级 🎯</h2>
                <div class="difficulty-buttons">
                    <button class="difficulty-btn kids-btn" data-level="explorer">
                        <div class="btn-icon">🌱</div>
                        <div class="btn-text">
                            <h3>小小探索家</h3>
                            <p>开始圣经冒险之旅</p>
                        </div>
                    </button>
                    
                    <button class="difficulty-btn kids-btn" data-level="adventurer">
                        <div class="btn-icon">⭐</div>
                        <div class="btn-text">
                            <h3>勇敢冒险者</h3>
                            <p>挑战更多圣经故事</p>
                        </div>
                    </button>
                    
                    <button class="difficulty-btn kids-btn" data-level="hero">
                        <div class="btn-icon">🏆</div>
                        <div class="btn-text">
                            <h3>圣经英雄</h3>
                            <p>成为真正的圣经专家</p>
                        </div>
                    </button>
                    
                    <button class="difficulty-btn kids-btn" data-level="legend">
                        <div class="btn-icon">👑</div>
                        <div class="btn-text">
                            <h3>传奇大师</h3>
                            <p>最高难度的终极挑战</p>
                        </div>
                    </button>
                </div>
            </div>

            <div class="stats-display">
                <div class="stat-card">
                    <div class="stat-icon">📚</div>
                    <div class="stat-info">
                        <span class="stat-number" id="totalQuestions">0</span>
                        <span class="stat-label">题目完成</span>
                    </div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-icon">🏆</div>
                    <div class="stat-info">
                        <span class="stat-number" id="totalBadges">0</span>
                        <span class="stat-label">获得徽章</span>
                    </div>
                </div>
            </div>

            <div class="menu-buttons">
                <button id="achievementsBtn" class="menu-btn">
                    <span class="btn-icon">🏅</span>
                    <span>我的徽章</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 游戏页面 -->
    <div id="gamePage" class="page">
        <div class="game-container">
            <!-- 游戏头部 -->
            <div class="game-header">
                <div class="progress-section">
                    <div class="progress-info">
                        <span class="question-counter">
                            第 <span id="currentQuestion">1</span> 题 / 共 <span id="totalQuestions">15</span> 题
                        </span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" id="progressFill"></div>
                    </div>
                </div>
                
                <div class="score-section">
                    <div class="score-display">
                        <span class="score-icon">⭐</span>
                        <span class="score-text">得分: <span id="currentScore">0</span></span>
                    </div>
                    <div class="streak-display">
                        <span class="streak-icon">🔥</span>
                        <span class="streak-text">连击: <span id="currentStreak">0</span></span>
                    </div>
                </div>
            </div>

            <!-- 问题区域 -->
            <div class="question-section">
                <div class="question-card">
                    <div class="question-icon">❓</div>
                    <div class="question-text" id="questionText">
                        问题将在这里显示...
                    </div>
                </div>
            </div>

            <!-- 选项区域 -->
            <div class="options-section">
                <div class="options-grid">
                    <button class="option-btn kids-option" data-option="0">
                        <span class="option-letter">A</span>
                        <span class="option-text"></span>
                    </button>
                    <button class="option-btn kids-option" data-option="1">
                        <span class="option-letter">B</span>
                        <span class="option-text"></span>
                    </button>
                    <button class="option-btn kids-option" data-option="2">
                        <span class="option-letter">C</span>
                        <span class="option-text"></span>
                    </button>
                    <button class="option-btn kids-option" data-option="3">
                        <span class="option-letter">D</span>
                        <span class="option-text"></span>
                    </button>
                </div>
            </div>

            <!-- 反馈区域 -->
            <div class="feedback-section" id="feedbackSection" style="display: none;">
                <div class="feedback-card">
                    <div class="feedback-icon" id="feedbackIcon">✅</div>
                    <div class="feedback-text" id="feedbackText">太棒了！</div>
                    <div class="explanation-text" id="explanationText"></div>
                </div>
            </div>

            <!-- 游戏控制 -->
            <div class="game-controls">
                <button id="nextBtn" class="control-btn next-btn" style="display: none;">
                    <span>下一题</span>
                    <span class="btn-arrow">→</span>
                </button>
                <button id="quitBtn" class="control-btn quit-btn">
                    <span>退出游戏</span>
                    <span class="btn-icon">🚪</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 结果页面 -->
    <div id="resultPage" class="page">
        <div class="result-container">
            <div class="result-celebration">
                <div class="celebration-icon" id="celebrationIcon">🎉</div>
                <h2 class="result-title" id="resultTitle">游戏完成！</h2>
                <p class="result-message" id="resultMessage">你做得很棒！</p>
            </div>

            <div class="score-summary">
                <div class="final-score">
                    <div class="score-icon">⭐</div>
                    <div class="score-info">
                        <span class="score-number" id="finalScore">0</span>
                        <span class="score-label">总得分</span>
                    </div>
                </div>
                
                <div class="accuracy-display">
                    <div class="accuracy-circle">
                        <div class="accuracy-text">
                            <span class="accuracy-number" id="accuracyRate">0</span>
                            <span class="accuracy-symbol">%</span>
                        </div>
                    </div>
                    <p class="accuracy-label">正确率</p>
                </div>
            </div>

            <div class="achievements-earned" id="achievementsEarned">
                <h3>🏆 获得新徽章！</h3>
                <div class="new-badges" id="newBadges"></div>
            </div>

            <div class="result-actions">
                <button id="shareBtn" class="action-btn share-btn">
                    <span class="btn-icon">📤</span>
                    <span>分享成绩</span>
                </button>
                <button id="playAgainBtn" class="action-btn play-again-btn">
                    <span class="btn-icon">🔄</span>
                    <span>再玩一次</span>
                </button>
                <button id="backToMenuBtn" class="action-btn menu-btn">
                    <span class="btn-icon">🏠</span>
                    <span>返回主页</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 成就页面 -->
    <div id="achievementsPage" class="page">
        <div class="achievements-container">
            <div class="page-header">
                <h2>🏅 我的徽章收藏</h2>
                <button id="backFromAchievements" class="back-btn">
                    <span>← 返回</span>
                </button>
            </div>
            
            <div class="achievements-grid" id="achievementsGrid">
                <!-- 成就徽章将在这里动态生成 -->
            </div>
        </div>
    </div>

    <!-- 分享弹窗 -->
    <div id="shareModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>📤 分享你的成绩</h3>
                <button class="close-btn" onclick="window.shareSystem.hideShareModal()">×</button>
            </div>
            <div class="modal-body">
                <div class="share-preview" id="sharePreview">
                    <!-- 分享预览内容 -->
                </div>
                <div class="share-buttons">
                    <button class="share-option" onclick="window.shareSystem.copyShareText()">
                        <span class="share-icon">📋</span>
                        <span>复制文字</span>
                    </button>
                    <button class="share-option" onclick="window.shareSystem.downloadShareImage()">
                        <span class="share-icon">🖼️</span>
                        <span>生成图片</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 特效容器 -->
    <div id="effectsContainer" class="effects-container"></div>

    <!-- JavaScript 文件 -->
    <script src="js/mp3-audio.js"></script>
    <script src="js/storage.js"></script>
    <script src="js/achievements.js"></script>
    <script src="js/scoring.js"></script>
    <script src="js/effects.js"></script>
    <script src="js/quiz.js"></script>
    <script src="js/share.js"></script>
    <script src="js/kids-app.js"></script>
</body>
</html>